import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
import { getWatchCore } from '@/core/watch-sdk';
import { onMounted, ref, unref } from 'vue';

export const emotionFacePickerEmits = () => ({
  /** 点击表情 */
  'click-face': emitFunc<string>(),
});

/**
 * face 表情选取 hook
 */
export const useEmotionFacePicker = (options: { emit: VueEmit<typeof emotionFacePickerEmits> }) => {
  const { emit } = options;

  /** 容器节点 */
  const containerRef = ref<HTMLDivElement>();

  /** 处理点击容器 */
  function onClickContainer(event: Event) {
    const watchCore = getWatchCore();

    const title = watchCore.chat.getEmotionFaceClickTarget(event);
    if (!title) {
      return;
    }

    emit('click-face', `[${title}]`);
  }

  /** 加载表情节点 */
  onMounted(() => {
    const watchCore = getWatchCore();
    const containerElem = unref(containerRef);
    if (containerElem) {
      containerElem.appendChild(watchCore.chat.getEmotionFaceDomList());
    }
  });

  return {
    containerRef,
    onClickContainer,
  };
};
